<template>
  <div class="about">
    <van-nav-bar
    :title="title"
    left-text="返回"
    @click-left="$router.back()"
/>
<ul>
    <li v-for="(item,i) in list[index].content" :key="i">
        <span>{{item.time}}</span>
        <span>{{item.con}}</span>
        <!-- index是外层的下标   i是里层的下标    index就是url上带过来的  -->
        <button @click="del(index,i)">撤回</button>
    </li>
</ul>
<button @click="delAll">全部撤回</button>

<!-- 底部 -->
<my-input v-model="con">
    <button @click="send">发送</button>
</my-input>
  </div>
</template>
<script>
import {useStore} from 'vuex'
import axios from 'axios'
import {ref,reactive,toRefs,computed} from 'vue'
import {useRouter,useRoute} from 'vue-router'
import myInput from '../components/myInput'
export default {
    setup(props) {
        const data = reactive({
            con:'',
            list:computed(()=>state.list)
        })
        const {push} = useRouter()
        const {commit,state} = useStore()
        const route = useRoute()
        console.log(route.params);
        const {title,index} = route.params
        const send = ()=>{
            if(data.con==""){
                alert('不能为空')
                return
            }
            // 添加数据
            commit('sendMsg',{index:index,con:data.con})
            data.con = ''
        }
        // 撤回
        const del=(index,i)=>{
            commit('del',{index,i})
        }
        // 全部撤回
        const delAll=()=>{
            // index是url上带过来的
            commit('delAll',index)

        }
        return {title,index,...toRefs(data),send,del,delAll}
    },
    components:{
        myInput
        
        }
}
</script>
